const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const loadUse = (loader) => {
  const arr =  [ // 解析器解析规则 ---- 从后到前
    { loader: MiniCssExtractPlugin.loader },
    { loader: 'css-loader' },
    { loader: 'postcss-loader', options: {
      postcssOptions: {
        plugins: [
          [
            'autoprefixer',
            {
              overrideBrowserslist: ['last 100 versions']
            }
          ],
          [
            'postcss-preset-env',
            {
              // Options
            }
          ]
        ]
      }
    } },
    { loader: loader }
  ]
  if (!loader) {
    arr.pop()
  }
  return arr
}
module.exports = { // webpack 基于 nodejs 
  mode: 'development', // production --- 默认为 production
  // entry: "./src/index.js" // 未指明打包出来的文件的名称
  // entry: ['./src/index.js'] // 未指明打包出来的文件的名称
  entry: {
    // 针对项目根目录的路径
    app: './src/index.js' // 指明打包出来的文件的名称为  app.js
  },
  output: {
    // 针对 webpack.config.js 所在的目录
    // path.resolve
    path: path.resolve(__dirname, '../', 'build'), // 指明打包出来的文件夹为build
    filename: '[name].[hash:8].js' // app.h222222.js
  },
  plugins: [
    new webpack.ProgressPlugin(), // 显示打包进度
    new CleanWebpackPlugin(), // 每次打包时清除上一次打包的结果
    // 拷贝文件
    new CopyWebpackPlugin({ // 克隆 src/assets 文件夹至输出目录下的 static 文件夹
      patterns: [
        {
          from: './src/assets',
          to: 'static'
        },
        {
          from: './public/favicon.ico',
          to: ''
        }
      ]
    }),
    // 压缩css文件 ---- 提取css文件
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:8].css'
    }),
    // new HtmlWebpackPlugin() // 打包之后在build目录下会出现index.html,并且自动引入 js文件 
    // 如果需要指定build目录下的 index.html 是public 目录下的模版，可以继续配置
    new HtmlWebpackPlugin({
      template: './public/index.html', // 模版代码
      title: 'webpack 神奇之旅',
      favicon: './public/favicon.ico'
    })
  ],
  module: { // 用来处理各种后缀名不同的文件 ---- 万物皆模块
    rules: [
      {
        test: /\.css$/, // 找到以css结尾的文件
        use: loadUse('')
      },
      {
        test: /\.less$/, // 找到以less结尾的文件
        use: loadUse('less-loader')
      },
      {
        test: /\.scss$/, // 找到以scss结尾的文件
        use: loadUse('sass-loader')
      },
      {
        test: /\.stylus$/, // 找到以stylus结尾的文件
        use: loadUse('stylus-loader')
      },
      // css中有背景图片地址
      {
        test: /\.(jpg|jpeg|png|gif|webp|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            // 如果设置的值足够大，显示base64图片地址（内存中）
            // 如果设置的值足够小，显示图片的地址
            limit: 2048000, // 单位为字节
            publicPath: './../' // css 采取模块化，
          }
        }
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            // presets: [ // 使用垫片
            //   // +++++++++++++++++++++++++++++++++
            //   [
            //     '@babel/preset-env',
            //     {
            //       useBuiltIns: 'usage'
            //     }
            //   ]
            // ],
            presets: [ // 不使用垫片
              '@babel/preset-env'
            ], // 处理js的高级语法
            plugins: [ // 插件 --- 先后顺序
              [ 
                '@babel/plugin-transform-runtime'
              ],
              [ // 装饰器语法的配置
                '@babel/plugin-proposal-decorators',
                { "legacy": true }
              ],
              [ // 处理 类的 属性 时用的， 不写构造函数
                '@babel/plugin-proposal-class-properties',
                {
                  loose: true
                }
              ]
            ]
          }
        }
      }
    ]
  },
  devServer: {
    port: 9000
  }
}